<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  data: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 100,
  },
  title: {
    type: String,
    default: "现值",
  },
  unit: {
    type: String,
    default: "所",
  },
});

const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);

  const option = {
    // backgroundColor: "#093664",
    grid: {
      containLabel: true,
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    title: {
      text: `${props.data} {unit|${props.unit}}`,
      z: 99,
      textStyle: {
        color: "#FFFFFF",
        fontSize: 18,
        fontWeight: "bold",
        rich: {
          unit: {
            fontSize: 12,
            color: "rgba(201, 233, 248, 0.80)",
          },
        },
      },
      itemGap: 10,
      left: "center",
      top: "45%",
    },
    series: [
      {
        name: "刻度线及刻度值",
        type: "gauge",
        center: ["50%", "50%"], //中心位置
        radius: "65%",
        max: props.max,
        axisLine: {
          // 仪表盘轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: [[1, "rgba(255,255,255,0)"]],
            width: 1,
          },
        },
        splitLine: {
          // 仪表盘分隔线
          show: false,
        },
        axisLabel: {
          // 仪表盘刻度标签
          show: false,
        },
        axisTick: {
          // 仪表盘刻度
          show: false,
        },
        pointer: {
          // 仪表盘指针
          show: false,
        },
        anchor: {
          // 表盘中指针的固定点
          show: false,
          showAbove: true,
        },
        detail: {
          valueAnimation: true,
          width: "70%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, 45],
          fontSize: 10,
          fontWeight: "bolder",
          formatter: function () {
            return `{div|${props.title}}`;
          },
          color: "rgba(201, 233, 248, 0.80)",
          rich: {
            div: {
              height: 18,
              width: 40,
              lineHeight: 18,
              fontSize: 10,
              color: "rgba(201,233,248,0.8)",
              backgroundColor: "#0E335B",
              borderRadius: 20,
            },
          },
        },
        data: [
          {
            value: props.data,
          },
        ],
      },
      {
        name: "进度条及指示器1",
        type: "gauge",
        center: ["50%", "55%"],
        radius: "100%",
        z: 40,
        max: props.max,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        anchor: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: props.data,
          },
        ],
        pointer: {
          z: 1,
          show: true,
          length: "52%",
          offsetCenter: [0, -28],
          width: 2,
          itemStyle: {
            color: "#2D80FF",
          },
        },
        progress: {
          show: true,
          width: 5,
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#4BFFF5",
                },
                {
                  offset: 1,
                  color: "#2D9993",
                },
              ],
            },
          },
        },
      },
      {
        name: "进度条及指示器背景",
        type: "gauge",
        center: ["50%", "55%"],
        radius: "100%",
        z: 30,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        anchor: {
          show: false,
          showAbove: true,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 100,
          },
        ],
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          width: 5,
          itemStyle: {
            color: "rgba(66,172,239,0.3)",
          },
        },
      },
      {
        name: "进度条及指示器2",
        type: "gauge",
        center: ["50%", "55%"],
        radius: "85%",
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        anchor: {
          show: false,
          showAbove: true,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 100,
          },
        ],
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          width: 2,
          itemStyle: {
            color: "#18B8D0",
          },
        },
      },
      {
        z: 89,
        type: "pie",
        name: "内层细圆环",
        radius: ["0%", "45%"], //0,35
        center: ["50%", "53%"],
        hoverAnimation: false,
        labelLine: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          color: "rgba(24, 184, 208, .1)", // 将内部中心圈的颜色设置为透明
          borderWidth: 3, // 设置边框宽度
          borderColor: "#2D80FF", // 设置边框颜色为蓝色
        },
        tooltip: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [100],
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
